<!--发票管理页面-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item prop="orderId">
          <ComSelectPage ref="newPageSelect" @selectPageChange="e=>dataForm.orderId=e"
                         :getUrl="{
                            url:'/api/userOrder/page',
                            method:'get',
                            params:{page: 1,limit: 10,total: 0},
                          }" :defaultValue="dataForm.orderId"
                         clearable
                         selectLabel="id"
                         selectValue="id"
                         selectLabelTwo="receiveName"
                         searchLabel="id"
                         placeholder="请输入订单编号"></ComSelectPage>
        </el-form-item>
        <el-form-item prop="userPhone">
          <el-input v-model="dataForm.userPhone" type="text" placeholder="请输入手机号码" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item v-if="$hasPermission('api:orderInvoiceInfo:export')">
          <el-button @click="exportHandle()" type="info">导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('api:orderInvoiceInfo:save')" type="primary"
                     @click="addOrUpdateHandle()">
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('api:orderInvoiceInfo:delete')" type="danger" @click="deleteHandle()">
            删除
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe highlight-current-row
                @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
                ref="multipleTable" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="orderId" label="订单编号" header-align="center" align="center"
                         width="150"></el-table-column>
        <el-table-column prop="titleType" label="抬头类型" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.titleType" placement="top">
              <div class="ellipsis1">{{ row.titleType ? row.titleType : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="invoiceType" label="发票类型" header-align="center" align="center" width="120"
                         show-overflow-tooltip>
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.invoiceType" placement="top">
              <div class="ellipsis1">{{ row.invoiceType ? row.invoiceType : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="titleType" label="抬头类型" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.titleType" placement="top">
              <div class="ellipsis1">{{ row.titleType ? row.titleType : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="invoiceTitle" label="发票抬头" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.invoiceTitle" placement="top">
              <div class="ellipsis1">{{ row.invoiceTitle ? row.invoiceTitle : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="invoiceContent" label="发票内容" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.invoiceContent" placement="top">
              <div class="ellipsis1">{{ row.invoiceContent ? row.invoiceContent : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="userEmail" label="邮箱号码" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.userEmail" placement="top">
              <div class="ellipsis1">{{ row.userEmail ? row.userEmail : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="userPhone" label="手机号码" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.userPhone" placement="top">
              <div class="ellipsis1">{{ row.userPhone ? row.userPhone : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="taxesNo" label="纳税人号" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.taxesNo" placement="top">
              <div class="ellipsis1">{{ row.taxesNo ? row.taxesNo : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="bankName" label="开户银行" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.bankName" placement="top">
              <div class="ellipsis1">{{ row.bankName ? row.bankName : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="bankNo" label="银行账号" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.bankNo" placement="top">
              <div class="ellipsis1">{{ row.bankNo ? row.bankNo : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="registerAddress" label="注册地址" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.registerAddress" placement="top">
              <div class="ellipsis1">{{ row.registerAddress ? row.registerAddress : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="registerPhone" label="注册电话" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.registerPhone" placement="top">
              <div class="ellipsis1">{{ row.registerPhone ? row.registerPhone : '暂无' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="createDate" label="创建日期" header-align="center" align="center"
                         width="150"></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="220">
          <template slot-scope="scope">
            <el-link v-if="$hasPermission('api:getOrder:query')" type="primary"
                     @click="getOrderList(scope.row)">关联订单
            </el-link>
            <el-link type="primary"
                     @click="showInvoiceList(scope.row)">查看
            </el-link>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                     layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <user-order-product-list v-if="isUserOrderProductList" ref="UserOrderProductList"
                               @cancellation="$refs.multipleTable.clearSelection()"></user-order-product-list>
      <!--查看用户信息组件-->
      <com-user-list :visible.sync="showUser" :content="content"></com-user-list>
      <!--查看发票组件-->
      <com-invoice-list :visible.sync="showInvoice" :content="content"
                        @cancellation="$refs.multipleTable.clearSelection()"></com-invoice-list>
    </div>

  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './orderInvoiceInfoAddOrUpdate.vue'
import UserOrderProductList from "@/views/modules/service/userOrderProductList.vue";
import {formatNumber} from "@/utils";

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/orderInvoiceInfo/page',
        getDataListIsPage: true,
        deleteURL: '/api/orderInvoiceInfo',
        deleteIsBatch: true,
        exportURL: '/api/orderInvoiceInfo'             // 导出接口，API地址
      },
      showUser: false,                   //是否显示用户信息
      isUserOrderProductList: false,    //订单详情弹窗
      showInvoice: false,                //是否显示发票信息
      content: {},                       //用户信息内容
      createDateList: [],               //创建时间数组
      dataForm: {
        id: '',                         //id
        titleType: '',                  //抬头类型：个人，企业
        invoiceTitle: '',               //发票抬头
        invoiceContent: '',             //发票内容
        invoiceType: '',                //电子普通发票类型
        taxesNo: '',                    //纳税人识别号
        bankName: '',                   //开户银行
        bankNo: '',                     //银行账号
        registerAddress: '',            //注册地址
        registerPhone: '',              //注册电话
        userEmail: '',                  //邮箱号码
        userPhone: '',                  //手机号码
        orderId: '',                    //订单编号
        createDate: '',                 //创建时间
      },
      timeList: []                          //时间戳数组
    }
  },
  watch: {
    '$route': 'getPath'
  },
  components: {
    UserOrderProductList,
    AddOrUpdate
  },
  created() {

  },
  mounted() {
    if (this.$route.query.orderId) {
      this.mixinViewModuleOptions.createdIsNeed = false
      this.dataForm.orderId = this.timeList.includes(this.$route.query.time) ? '' : this.$route.query.orderId
      this.getDataList()//查询数据
    } else {
      this.mixinViewModuleOptions.createdIsNeed = true
      this.getDataList()//查询数据
    }
    this.timeList.push(this.$route.query.time)
  },
  methods: {
    formatNumber,
    //监听路由变化
    getPath() {
      if (this.$route.query.orderId) {
        this.mixinViewModuleOptions.createdIsNeed = false
        this.dataForm.orderId = this.timeList.includes(this.$route.query.time) ? '' : this.$route.query.orderId
        this.getDataList()//查询数据
      } else {
        this.mixinViewModuleOptions.createdIsNeed = true
        this.getDataList()//查询数据
      }
      this.timeList.push(this.$route.query.time)
    },
    //查看订单信息
    getOrderList(item) {
      this.$refs.multipleTable.toggleRowSelection(item);
      this.isUserOrderProductList = true
      this.$nextTick(() => {
        this.$refs.UserOrderProductList.dataForm.id = item.orderId
        this.$refs.UserOrderProductList.init()
      })
    },
    //显示发票信息
    showInvoiceList(content) {
      // console.log(content);
      this.$refs.multipleTable.toggleRowSelection(content);
      this.showInvoice = true;
      this.content = content;
    },
  }
}
</script>
